import React from 'react'
import { Menu } from 'antd';
import type { MenuProps } from 'antd';
import { Link } from 'react-router-dom'
// 引入路由数组
import { routes } from '@/router/Index'
import { useAppSelector } from '@/store/hooks'
//导入方法
import { getNewCheckedKeysFn, getNewRoutesFn } from '@/utils/common';
// 引入lodash 方法
import _ from 'lodash'

type Props = {}
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
        type,
    } as MenuItem;
};


export default function Appmenu({ }: Props) {
    let copyRoutes = _.cloneDeep(routes)
    // 获取rtk中纯的checkedKeys
    const checkedKeys = useAppSelector(state => state.user.userinfo.checkedkeys)
    const adminname = useAppSelector(state => state.user.userinfo.adminname);
    //  使用递归深拷贝一个routes 映射表, 去修改拷贝的routes, 而不修改原routes

    // console.log('checkedKeys', checkedKeys);
    // console.log('newcheckedKeys', getNewCheckedKeysFn(checkedKeys));
    // console.log(getNewRoutesFn(routes, getNewCheckedKeysFn(checkedKeys)))
    // 判断用户是否为admin超级管理员, 如果是菜单项遍历的是整个routes, 否则便利的是后端返回的菜单项
    let routesmenu = adminname == 'admin' ? copyRoutes : getNewRoutesFn(copyRoutes, getNewCheckedKeysFn(checkedKeys))
    // 封装成一个函数
    const getItemsFn: any = (routesmenu: any[]) => {
        let arr = routesmenu.map(item => {
            if (item.key && item.label) {
                if (item.children) {
                    return getItem(
                        item.label,
                        item.key,
                        item.icon,
                        getItemsFn(item.children)
                    )
                } else {
                    return getItem(<Link to={item.path}>{item.label}</Link>, item.key, item.icon)
                }
            } else {
                return null
            }
        })

        return arr
    }

    // console.log('getItemsFn', getItemsFn(routesmenu));

    // const items: MenuItem[] = routesmenu.map(item => {
    //     if (item.key && item.label) {
    //         if (item.children) {
    //             return getItem(
    //                 item.label,
    //                 item.key,
    //                 item.icon,
    //                 item.children.map((child: any) => {
    //                     if (child.key && child.label) {
    //                         return getItem(
    //                             <Link to={child.path} > {child.label}</Link>,
    //                             child.key,
    //                             child.icon
    //                         )
    //                     } else {
    //                         return null
    //                     }
    //                 }
    //                 ))
    //         } else {
    //             return getItem(<Link to={item.path}>{item.label}</Link>, item.key, item.icon)
    //         }
    //     }
    //     return null
    // })
    return (
        <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={['1']}
            items={getItemsFn(routesmenu)}
        />
    )
}